
<template>
  <div class="input-bottom-culture specifics" >
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">

      <div class="input-bottom-dialogue-container-box">
        <div class="input-tip-title">
          <div class="tip">
            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
          </div>
          <div class="title">特色美食:</div>
        </div>
        <div class="category-list">
          <div style="white-space: pre-line;">{{bestFood}}</div>

        </div>

      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/service/TouristHomepage";
import {ref} from "vue";
const props = defineProps({
  selectCulturePlace: {
    type: Object,
    default: () => {
      return {}
    }
  },
  selectCultureInfo: {
    type: Object,
    default: () => {
      return {}
    }
  },
  currentVoice: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
// 特色美食
const bestFood=ref('')
function getInfoByKeywordApi(){
  if(props.selectCulturePlace.landmarkName && props.selectCultureInfo.name) {
    let prarms = {
      place: props.selectCulturePlace.landmarkName,
      info: props.selectCultureInfo.name,
    }
    api.getInfoByKeyword(prarms).then((res) => {
      console.log("getInfoByKeyword", res)
      bestFood.value = res.data.answer

    })
  }
}
// 监听
watch(() => props.currentVoice, (newValue, oldValue) => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    bestFood.value = props.currentVoice.answer
  }else {
    getInfoByKeywordApi()

  }
})
onMounted(() => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    bestFood.value = props.currentVoice.answer
  }else {
    getInfoByKeywordApi()

  }

});
</script>
<style scoped lang="scss">
.input-bottom-culture{

  display: flex;
  .input-bottom-dialogue-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);

    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      overflow: auto;
      .input-tip-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .category-list{
        display: flex;
        margin-top: 16px;

        //  换行
        flex-wrap: wrap;
        font-family: DingliesongtypefaceRegular;
        font-weight: 400;
        font-size: 16px;
        color: #9B6548;
        text-align: left;
        font-style: normal;
        text-transform: none;


      }
    }


  }
}
</style>